<template>
  <div>
    <!--  -->
    <el-button>
      <el-icon
        :style="{ 'margin-right': '13px', 'background-color': '#ff0000' }"
        ><Plus/>
      </el-icon>
      查询
    </el-button>
  </div>
  <div>
    <el-icon><Plus /></el-icon>
    <el-icon><ArrowLeft /></el-icon>
    <el-icon><DocumentAdd /></el-icon>
    <el-icon><Microphone /></el-icon>
    <el-icon><Location /></el-icon>
    <el-icon><Watermelon /></el-icon>
    <el-icon><Printer /></el-icon>
    <el-icon><Sunrise /></el-icon>
    <el-icon><ChromeFilled /></el-icon>
    <el-icon><NoSmoking /></el-icon>
  </div>

  <div>
    <el-icon>
      <Delete />
    </el-icon>

    <hr />
    <el-icon><Male /></el-icon>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
      <path
        fill="currentColor"
        d="M399.5 849.5a225 225 0 1 0 0-450 225 225 0 0 0 0 450m0 56.25a281.25 281.25 0 1 1 0-562.5 281.25 281.25 0 0 1 0 562.5m253.125-787.5h225q28.125 0 28.125 28.125T877.625 174.5h-225q-28.125 0-28.125-28.125t28.125-28.125"
      ></path>
      <path
        fill="currentColor"
        d="M877.625 118.25q28.125 0 28.125 28.125v225q0 28.125-28.125 28.125T849.5 371.375v-225q0-28.125 28.125-28.125"
      ></path>
      <path
        fill="currentColor"
        d="M604.813 458.9 565.1 419.131l292.613-292.668 39.825 39.824z"
      ></path>
    </svg>
    <!-- 由于SVG图标默认不携带任何属性 -->
    <!-- 你需要直接提供它们 -->
    <edit style="width: 1em; height: 1em; margin-right: 8px" />
    <share style="width: 2em; height: 2em; margin-right: 118px" />
    <delete style="width: 1em; height: 1em; margin-right: 218px" />
    <search style="width: 1em; height: 1em; margin-right: 318px" />
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
div {
  float: left;
  width: 150px;
  height: 150px;
  background-color: azure;
}
</style>